<!DOCTYPE html>
<html lang="en">
<head>
    <!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.common.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
</head>
<body>
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <h1>ok</h1>
     
     <div id="main" style="width: 600px;height:400px;"></div>
     <button type="button"  style="position:absolute;left:150px;width:150px;height:35px;" onclick="renewCelsius()" >获取当前新的温度</button>
     <button type="button"  style="position:absolute;left:300px;width:100px;height:35px;" onclick="warnningDingDing()" >钉钉获取温度</button>
        <script>
            function warnningDingDing(){
                axios.get("http://localhost:5555/webhook").then((res)=>{
                    if (res.data == 0)
                    alert("已经发送成功啦")
                    else
                    alert("发送失败，请检查后端的errcode")
                })
            };            
             function renewCelsius(){
                 console.log("开始获取")
                 var url = "http://localhost:5555/multi/celsius"
                axios.get(url)
                    .then((res)=>{
                        option.xAxis.data.push(new Date().toLocaleTimeString());
                        //option.series.data.push(res.data);
                        option.series[0].data.push(res.data[0])
                        option.series[1].data.push(res.data[1])
                        option.series[2].data.push(res.data[2])
                        option.series[3].data.push(res.data[3])
                        myChart.setOption(option);// 使用刚指定的配置项和数据显示图表。
                        alert("更新完成")
                    });
            
            };
        </script> 
     <script type="text/javascript">
         // 基于准备好的dom，初始化echarts实例
        
         var myChart = echarts.init(document.getElementById('main')); //var 声明全局变量
 
         // 指定图表的配置项和数据
         var option = {
             title: {
                 text: 'ECharts Celsius Display'
             },
             tooltip: {},
             legend: {
                 data:['sensor1','sensor2','sensor3','sensor4']
             },
             xAxis: {
                //  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                data: [] //是当前请求时间
             },
             yAxis: {},
             series: [
                    {
                        name: 'sensor1',
                        type: 'line',
                        data: []
                    },
                    {
                        name: 'sensor2',
                        type: 'line',
                        data: []
                    },
                    {
                        name: 'sensor3',
                        type: 'line',
                        data: []
                    },
                    {
                        name: 'sensor4',
                        type: 'line',
                        data: []
                    }
                ]
         };
         //option.xAxis.data  : []  是X
         // option.series.data: []  是y高度
        
 
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
     </script> 
</body>
</html>

